<template>
  <div class="page">
    <div class="task-list">
      <div class="task-header">
        <a-row>
          <a-col :span="18">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item style="margin-left: 10px">
                  <a-input v-model:value="formState.account" placeholder="支持按照账号模糊搜索" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="渠道">
                  <a-select
                    v-model:value="formState.channel"
                    style="width: 120px"
                    :options="options"
                    @change="handleChange"
                  >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-button type="primary">搜索</a-button>
                <a-button style="margin-left: 10px">重置</a-button>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="6" style="text-align: right">
            <a-button style="margin-left: 10px" type="primary" @click="openAddAccount">
              添加账号
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="task-table">
        <a-table :columns="columns" :data-source="tableData.data">
          <template #channel="{ record }">
            <div>
              {{ getEnumsDesc(CHANNEL_ENUM, record.channel, "desc") }}
            </div>
          </template>
          <template #state="{ record }">
            <div>
              {{ record.state }}
            </div>
          </template>
          <template #createdTime="{ record }">
            <div>
              {{ formatTime(record.createdTime) }}
            </div>
          </template>
          <template #updatedTime="{ record }">
            <div>
              {{ formatTime(record.updatedTime) }}
            </div>
          </template>
          <template #action="{ record }">
            <div>
              <a href="javascript:;" @click="openUpdateAccountModal(record)">初始化</a>
              <a-divider type="vertical" />
              <a href="javascript:;" @click="openBrandModal(record)"> 查看品牌</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确认删除当前账号吗?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirmDeleteAccount(record)"
                @cancel="cancelDeleteAccount"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
      <div>
        <add-account-modal
          v-if="addAccountVisible"
          title="添加账号"
          :visible="addAccountVisible"
          @handleCancelModal="closAddAccountModal"
        ></add-account-modal>
        <brand-modal
          v-if="brandVisible"
          title=""
          :visible="brandVisible"
          :record="rowDate"
          @handleCancelModal="closBrandModal"
        ></brand-modal>
        <update-account-modal
          v-if="updateAccountVisible"
          title="初始化账号"
          :visible="updateAccountVisible"
          :record="rowDate"
          @handleCancelModal="closUpdateAccountModal"
        ></update-account-modal>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { SelectTypes } from "ant-design-vue/es/select";
import { SelectValue } from "@/shims/globe";
import { formatTime } from "@/utils/index";
import { CHANNEL_ENUM, generationOptions, getEnumsDesc } from "@/utils/enums";
import AddAccountModal from "@/components/addAccountModal.vue";

import { columns } from "./config";
import BrandModal from "../components/brandModal.vue";
import UpdateAccountModal from "../components/updateAccountModal.vue";
import useAccountList from "../hooks/useAccountList";
import useOpenModal from "../hooks/useOpenModal";
import useDeleteAccount from "../hooks/useDeleteAccount";

export default defineComponent({
  components: {
    AddAccountModal,
    BrandModal,
    UpdateAccountModal
  },
  setup() {
    // 请求参数
    const formState = reactive({
      account: "",
      accountId: "",
      channel: "AL",
      orderCondition: {
        // orderField:"",
        orderType: "DESC" //升序 ASC, 降序 DESC
      },
      pageNum: 1,
      pageSize: 10,
      platAccount: "",
      userId: "1"
    });
    // 列表请求
    const { tableData, getAccountList } = useAccountList(formState);

    const channelOptions = generationOptions(CHANNEL_ENUM);
    const options = ref<SelectTypes["options"]>([...channelOptions]);
    const handleChange = (value: SelectValue) => {
      console.log(value); // { key: "lucy", label: "Lucy (101)" }
    };
    const { rowDate, openModal, closeModal } = useOpenModal();

    const updateAccountVisible = ref<boolean>(false);
    const openUpdateAccountModal = (record: any) => {
      openModal(record);
      updateAccountVisible.value = true;
    };
    const closUpdateAccountModal = () => {
      updateAccountVisible.value = false;
      closeModal(getAccountList);
    };

    const brandVisible = ref<boolean>(false);
    const openBrandModal = (record: any) => {
      openModal(record);
      brandVisible.value = true;
    };
    const closBrandModal = () => {
      brandVisible.value = false;
      closeModal();
    };

    const addAccountVisible = ref<boolean>(false);
    const openAddAccount = () => {
      addAccountVisible.value = true;
    };
    const closAddAccountModal = () => {
      addAccountVisible.value = false;
      closeModal(getAccountList);
    };

    const { confirmDeleteAccount, cancelDeleteAccount } = useDeleteAccount(getAccountList);
    return {
      CHANNEL_ENUM,
      formatTime,
      getEnumsDesc,
      addAccountVisible,
      brandVisible,
      updateAccountVisible,
      formState,
      options,
      handleChange,
      tableData,
      columns,
      openUpdateAccountModal,
      closUpdateAccountModal,
      openAddAccount,
      closAddAccountModal,
      openBrandModal,
      closBrandModal,
      cancelDeleteAccount,
      confirmDeleteAccount,
      rowDate
    };
  }
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
